<template>
  <div class="L-report-container" ref="container">
    <van-sticky class="report-head" v-if="displayType === 'vertical'">
      <div class="L-report-filter-row">
        <div>
          <van-row :gutter="10" type="flex" align="center" justify="space-between">
            <van-col class="L-text-align-center">
              当前 <span style="color: red">{{ page }}</span> 页
            </van-col>

            <van-col class="L-text-align-center">
              共 <span style="color: red">{{ totalPage || 0 }}</span> 页
            </van-col>
            <van-col class="L-text-align-right">
              共 <span style="color: red">{{ total || 0 }}</span> 条数据
            </van-col>
          </van-row>
        </div>

        <div>
          <i @click="convert" class="iconfont icon-hengping1" style="margin-right: 15px"></i>
          <i @click="hanldeClickFilter" class="iconfont icon-shaixuan4" style="margin-right: 15px"></i>
          <span @click="hanldeClickFilter" v-show="!isRolled">筛选</span>
        </div>
      </div>
    </van-sticky>

    <div class="report-body" v-if="displayType === 'vertical'">
      <vxe-table border :data="tableData" ref="tableRef" :row-config="{ isHover: true }">
        <!-- <vxe-column type="seq" width="70"></vxe-column> -->
        <!-- <vxe-colgroup title="年龄信息">
      <vxe-column field="age" title="年龄"></vxe-column>
      <vxe-column field="birthday" title="生日"></vxe-column>
    </vxe-colgroup>
        <vxe-column v-for="(item, index) in headData" :key="index"  :title="item.value"
          :width="item.width">
          <vxe-column v-if="item.childs" v-for="(item1, index) in item" :key="index" :field="item1.fieldID" :title="item1.value"
          :width="item1.width">
        </vxe-column>
        </vxe-column> -->

        <!-- <vxe-column  width="70" fixed="right">
              <template #default="{rowIndex,columnIndex}">
            
              <span>{{rowIndex}}删除</span>
            </template>
</vxe-column> -->
      </vxe-table>
    </div>

    <van-popup v-model:show="isShowFilter" position="right" :style="{ height: '100%', width: '100%' }">
      <ReportFilter
        @back="
          () => {
            isShowFilter = false
          }
        "
        @handleClickFilterFind="handleClickFilterFind"
        :conditionArr="conditionArr"
      ></ReportFilter>
    </van-popup>
    <div class="L-bottom-space" v-if="displayType === 'vertical'"></div>
    <div class="L-bottom-row report-footer" v-if="displayType === 'vertical' && totalPage">
      <van-row :gutter="10" style="width: 100%; text-align: center">
        <van-col :span="12">
          <van-button color="#e5ebfa" type="primary" size="small" style="width: 80%; color: #3677f6" @click="handleClickPageTo('pre')">上一页</van-button>
        </van-col>
        <van-col :span="12">
          <van-button color="#e5ebfa" type="primary" size="small" style="width: 80%; color: #3677f6" @click="handleClickPageTo('next')">下一页</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
  <!-- 横屏 (手动修改)-->
  <!-- <div v-if="displayType === 'horizontal'" style="position: relative;width: 100vw;height: 100vh;">
    <div class="L-horizontal-box">
      <div class="L-report-filter-row">
        <van-row :gutter="10" type="flex" align="center" justify="space-between">
          <van-col class="L-text-align-center">
            当前 <span style="color:red">{{ page }}</span> 页
          </van-col>

          <van-col class="L-text-align-center">
            共 <span style="color:red">{{ totalPage || 0 }}</span> 页
          </van-col>
          <van-col class="L-text-align-right">
            共 <span style="color:red">{{ total || 0 }}</span> 条数据
          </van-col>
          <van-col>
            <van-button color="#e5ebfa" type="primary" size="small" style="width:80px;color:#3677f6"
              @click="handleClickPageTo('pre')">上一页</van-button>
          </van-col>

          <van-col>
            <van-button color="#e5ebfa" type="primary" size="small" style="width:80px;color:#3677f6"
              @click="handleClickPageTo('next')">下一页</van-button>
               
          </van-col>

        </van-row>


        <div>
          <i @click="convert" class="iconfont icon-hengping1" style="margin-right:15px"></i>
          <i @click="hanldeClickFilter" class="iconfont icon-shaixuan4" style="margin-right:5px"></i>筛选
        </div>
      </div>
      <vxe-table :data="tableData" :row-config="{ isHover: true }">
        <vxe-column type="seq" width="70"></vxe-column>
        <vxe-column v-for="(item, index) in headData" :key="index" :field="item.fieldID" :title="item.value"
          :width="item.width"></vxe-column>

      </vxe-table>
    </div>

  </div> -->
</template>

<script lang="ts" setup>
import * as dd from 'dingtalk-jsapi'
import ReportFilter from '@/components/base/Report/ReportFilter.vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()

import { useJssdk } from '@/hooks/jssdk.js'
const jssdk = useJssdk()

import { ref, onMounted, computed } from 'vue'
import { apiConfigurable } from '@/request/api/api'

import { closeToast, showLoadingToast, showToast, showSuccessToast, Field } from 'vant'
import { title } from 'process'

const container = ref(null)
const displayType = ref('vertical')
const isRolled = ref(false)
const tableRef = ref(null)
function convert() {
  dd.ready(function () {
    isRolled.value = !isRolled.value
    if (!isRolled.value) {
      dd.device.screen.rotateView({
        showStatusBar: true, // 否显示statusbar
        clockwise: true, // 是否顺时针方向
        onSuccess: function (result) {
          console.log('rotateView onSuccess', result)
        },
        onFail: function (err) {
          console.log('rotateView onFail', err)
        }
      })
    } else {
      dd.device.screen.resetView({
        onSuccess: function (result) {
          console.log('resetView onSuccess', result)
        },
        onFail: function (err) {
          console.log('resetView onFail', err)
        }
      })
    }
  })
  // displayType.value = displayType.value === "vertical" ? "horizontal" : "vertical"
  return
  if (displayType.value === 'vertical') {
    container.value.style.width = '100vh'
    container.value.style.height = '100vw'
    container.value.style.transform = 'rotate(90deg)'
    container.value.style.top = 0
    container.value.style.left = '100vw'
  } else {
    container.value.style.width = '100vw'
    container.value.style.height = '100vh'
    container.value.style.transform = 'rotate(0deg)'
  }
}

onMounted(() => {
  // getData();
  getCondition()
  jssdk.getEnvironment()
})

const isShowFilter = ref(false)
const page = ref(1)

const total = ref('')
const totalPage = ref('')

interface postDataVO {
  [key: string]: any
}
const conditionArr = ref([])
const conditiondata = ref([])

const headData = ref([])
const bodydata = ref([])

const suijiID = ref('')

function removeEmptyKeys(obj) {
  for (const key in obj) {
    if (key === null || key === undefined || key === '' || Number.isNaN(key)) {
      delete obj[key]
    } else {
      const value = obj[key]
      if (value === null || value === undefined || value === '' || Number.isNaN(value)) {
        delete obj[key]
      }
    }
  }
  return obj
}

function getData() {
  const url = 'report.result.do'
  const { idreport, idview } = route.query
  const data: postDataVO = {
    reportid: idreport,
    reportviewid: idview,
    intpage: page.value,
    suijiID: suijiID.value,
    view: 1
  }

  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  })
  console.log(conditiondata.value,4545)
  for (let i = 0; i < conditiondata.value.length; i++) {
    data[i + '_report_fieldid'] = conditiondata.value[i].viewcondition_fieldid
    data[i + '_report_field'] = conditiondata.value[i].viewcondition_field
    data[i + '_report_joinobject'] = conditiondata.value[i].viewcondition_joinobject
    data[i + '_report_value'] = conditiondata.value[i].viewcondition_value
    data[i + '_report_value_ref'] = conditiondata.value[i].viewcondition_value_ref
    data[i + '_report_operate'] = conditiondata.value[i].viewcondition_operate
  }

  apiConfigurable(url, data).then((res) => {
    if (res.code === 0) {
      bodydata.value = res.data.jsondata.bodydata
      headData.value = res.data.jsondata.headdata.map((i) => {
        let children
        if (i.childs) {
          children = i.childs.map((ic) => {
            return {
              align: ic.textAlign, // 内容居中
              headerAlign: ic.textAlign, // 表头居中
              width: 120 * ic.cols,
              title: ic.value,
              field: `${i.value}_${ic.fieldID}` || ''
            }
          })
        }
        return {
          align: i.textAlign,
          headerAlign: i.textAlign,
          width: 120 * i.cols,
          title: i.value,
          field: i.fieldID || '',
          children: children
        }
      })
      console.log(headData.value, 2525)
      tableRef.value?.reloadColumn(headData.value)
      total.value = res.data.jsondata.intallrows
      totalPage.value = res.data.jsondata.intallpage

      suijiID.value = res.data.jsondata.randomId

      closeToast()
    } else {
    }
  })
}

const tableData = computed(() => {
  const res = bodydata.value.map((item, index) => {
    const obj = {}
    for (let i = 0; i < item.length; i++) {
      if (item[i].fieldID !== '') {
      obj[item[i].fieldID] = item[i].value
      }
    }
    return obj
  })
  console.log(res,5454)
  return res
})

function getCondition() {
  const url = 'report.condition.do'
  const { idreport } = route.query
  const data = {
    idreport
  }

  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  })

  apiConfigurable(url, data).then((res) => {
    if (res.code === 0) {
      conditionArr.value = res.data.jsondata

      closeToast()
    }
  })
}

function hanldeClickFilter() {
  isShowFilter.value = true
}

function handleClickFilterFind(filterArr) {
  page.value = 1
  conditiondata.value = filterArr
  isShowFilter.value = false

  getData()
}

function handleClickPageTo(operate: string) {
  if (operate === 'pre' && page.value === 1) {
    showToast('当前是第一页')
    return
  }

  if (operate === 'next' && page.value === Number(totalPage)) {
    showToast('当前是最后一页')
    return
  }

  page.value = operate === 'pre' ? page.value - 1 : page.value + 1
  getData()
}
</script>
<style scoped>
:deep(.vxe-table .vxe-header--column) {
  border: 1px solid #e8eaec;
}
.L-horizontal-box {
  width: 100vh;
  height: 100vw;
  transform: rotate(90deg);
  transform-origin: top left;
  position: absolute;
  left: 100vw;
  top: 0;
  overflow: auto;
}

.L-report-container {
  width: 100vw;
  height: 100vh;
  transition: all 0.5s;
  position: absolute;

  display: flex;
  flex-direction: column;
}

.L-report-filter-row {
  width: 100%;
  height: 50px;
  background: #fff;
  padding: 0 10px;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
